/**
* 组对应的人员
 */
<template>
    <vp-dialog ref="dialogRef" :span="1">
        <template #title>
            <vp-label v-if="type == 'add'" zh="新增" en="Add" align="left"/>
            <vp-label v-else zh="修改" en="Edit" align="left"/>
        </template>
        <el-form label-suffix=":" v-loading="loading"  :model="formData" :rules="formRules" ref="formRef" label-width="120px">
            <el-row>
                <vp-col :span="1">
                    <el-form-item :label="$t('user.username')" prop="userId">
                        <template #label><vp-label zh="用户名" en="Account"/></template>
                        <UserSelect
                            :selectedId="formData.user.realname"
                            @userSelected="choosezrgcsZ"
                            style="width: 100%"
                        ></UserSelect>
                    </el-form-item>
                </vp-col>
                <vp-col v-if="group.bmbs===1" :span="1">
                    <el-form-item :label="$t('workflowcandidate.bmbs')" prop="bmId">
                        <template #label><vp-label zh="匹配部门" en="Dept. Matching"/></template>
                        <vp-department-select-tree :selectedId="formData.bmId" :selectedText="formData.department.dprtname" @treeSelected="handleDepartmentSelected" style="width:100%"></vp-department-select-tree>
                    </el-form-item>
                </vp-col>
              
            </el-row>
        </el-form>
        <template #footer>
            <vp-btn-confirm :loading="saveLoading" @click="handleSave"/>
        </template>
    </vp-dialog>
</template>
<script setup lang="ts" name="editCondidateGroupUser">
import { defineAsyncComponent, ref } from 'vue';
import request from '/@/utils/request';
import validateUtils from '/@/utils/validateUtils';

const emits = defineEmits(['formSubmited']);
const props= defineProps<{ group: {} }>();
const UserSelect = defineAsyncComponent(() => import('/@/components/vp/user/VpUserSelect.vue'));

const formData = ref({
        id:"",
        userId: "",
        bmId: "",
        jdId: "",
        jx: "",
        fjxlh: "",
        user:{
            id:"",
            username:"",
            realname:"",
        },
        department:{
            id: "",
            dprtname: "",
        },
    });
    const formRules = {
        userId:[ 
            validateUtils.notNull,
        ],
        jx: [
            validateUtils.notChinese
        ],
        fjxlh: [
            validateUtils.notChinese
        ],
    }

    const loading = ref(false);
    const type = ref('add');
    const saveLoading = ref(false);

    const dialogRef = ref();
    const formRef = ref();
    const initFormData = ()=>{
        formData.value = {
            id:"",
            userId: "",
            bmId: "",
            jdId: "",
            jx: "",
            fjxlh: "",
            user:{
                id:"",
                username:"",
                realname:"",
            },
            department:{
                id: "",
                dprtname: "",
            },
        }
    }

    const handleSave = () => {
        if(loading.value){
            return;
        }
        saveLoading.value = true;
        formRef.value.validate((valid: Boolean)=>{
            if(valid){
                request.post("/workflow/candidate/group/user/"+type.value, {
                    ...formData.value,
                    mainid: props.group.id,
                }).then(()=>{
                    emits("formSubmited");
                    dialogRef.value.handleClose();
                }).catch(()=>{
                }).finally(()=>{
                    saveLoading.value = false;
                })
            }else{
                saveLoading.value = false;
            }
        })
    }

    const handleOpen = (_type: string, id: string)=>{
        type.value = _type;
        initFormData();
        dialogRef.value.handleOpen();
        if(type.value === 'edit'){
            loading.value = true;
            request.get(`/workflow/candidate/group/user/${id}`).then((res)=>{
                formData.value = {
                    ...formData.value,
                    ...res.data
                };
                loading.value = false;
            })
        }
    }

    const choosezrgcsZ = (data: any) => {
        formData.value.userId = data.id;
        formData.value.user = {
            id : data.id,
            username : "",
            realname : data.label,
        }
        if(props.group.bmbs == 1){
            formData.value.bmId = data.department?.id ||'';
        }
        if(props.group.jdbs == 1){
            formData.value.department.dprtname = data.department?.dprtname ||'';
            formData.value.jdId = data.jddm || '';
        }
    };


    const handleBaseSelected = (data: any)=>{
        formData.value.jdId = data.id;
    }

    const handleDepartmentSelected = (data:any)=>{
        formData.value.bmId=data.id;
        formData.value.department.dprtname=data.label;
    }

    const chooseAircraft = (aircraft: any) => {
        formData.value.fjxlh = aircraft.fjxlh;
        if(!formData.value.jx && props.group.jdbs == 1){
            formData.value.jx = aircraft.fjjx;
        }
    }

    const chooseAircraftModel = (data: any) => {
        if(formData.value.jx != data.fjjx){
            formData.value.fjxlh = "";
        }
        formData.value.jx = data.fjjx;
    };

    defineExpose({
        handleOpen,
    })
</script>
